<template>

  <div v-if="JSON.stringify(goodsInfo) === '{}'">
    暂无商品
  </div>

  <div v-else class="goods-detail-container">
    <div class="top">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(item,index) in goodsInfo.goods_slideshow_img" :key="index">
          <el-image
            style="width: 100%;"
            :src="item"
          />
        </el-carousel-item>
      </el-carousel>
      <div class="goods-info">
        <div class="goods-title">
          <el-tag>{{ goodsInfo.trade_type_name }}</el-tag>
          <h3>{{ goodsInfo.goods_name }}</h3>
        </div>
        <div class="goods-price-box">
          <div>采购价：<span class="text-red">{{ goodsInfo.price }}</span></div>
          <div>商品SPU：<span class="text-red">{{ goodsInfo.goods_spu }}</span></div>
          <div>库存： <span class="text-red">{{ goodsInfo.stock }}</span></div>
        </div>
        <div class="goods-tips">
          <el-alert
            :closable="false"
            show-icon
            title="由于商品特殊性,本商品不支持无理由退货或无理由拒收"
            type="error"
          />
        </div>
      </div>
    </div>
    <div class="bottom">

      <el-tabs v-model="a" type="card">
        <el-tab-pane label="商品详情" name="first">
          <div class="goods-prod">
            <span>国际条码 {{ goodsInfo.barcode }}</span>
            <span>品牌： {{ goodsInfo.brand_name }}</span>
            <span>包装单位: {{ goodsInfo.unit_name }}</span>
            <span>原产地 ： {{ goodsInfo.origin_name }}</span>
          </div>
          <div class="goods-description" v-html="goodsInfo.description" />

        </el-tab-pane>
      </el-tabs>

    </div>

  </div>
</template>

<script>
import { list } from '@/api/product'
import { tempGoods } from '@/api/externalGoods'

export default {
  name: 'GoodsDetail',
  data() {
    return {
      a: 'first',
      goods_spu: '',
      goodsInfo: {}
      // goodsInfo: {
      //   'id': 3408010,
      //   'syst_goods_id': 328088,
      //   'goods_spu': 'BS10511879',
      //   'goods_name': 'ANCHOR/安佳 新西兰成人全脂奶粉900G 罐装',
      //   'goods_subtitle': '',
      //   'goods_keywords': '',
      //   'goods_img': 'http://image.mihui365.com/bbc/middleImg/18374490649018787.jpg',
      //   'goods_slideshow_img': [
      //     'http://image.mihui365.com/bbc/middleImg/18374490649018787.jpg'
      //   ],
      //   'barcode': '9415007034261',
      //   'brand_id': 2084,
      //   'brand_name': 'ANCHOR/安佳',
      //   'sync_brand_id': 2084,
      //   'sync_brand_name': 'ANCHOR/安佳',
      //   'origin_id': 10,
      //   'origin_name': '新西兰',
      //   'trade_type_id': 1,
      //   'trade_type_name': '保税直供',
      //   'unit_id': 2,
      //   'unit_name': '件',
      //   'is_sale': 1,
      //   'is_sys_api': 1,
      //   'category_id': 6,
      //   'sync_category_id': 6,
      //   'sync_category_id_path': '1_2_6',
      //   'sync_category_name': '["\\u6bcd\\u5a74\\u7528\\u54c1","\\u5976\\u7c89","\\u6210\\u4eba\\u5976\\u7c89"]',
      //   'description': "<img class='wscnph' src='http://image.mihui365.com/bbc/macImg/18374445437423788.jpg'><img class='wscnph' src='http://image.mihui365.com/bbc/macImg/18374445476365187.jpg'><img class='wscnph' src='http://image.mihui365.com/bbc/macImg/18374445565682681.jpg'><img class='wscnph' src='http://image.mihui365.com/bbc/macImg/18374445593394654.jpg'>",
      //   'spec': 2,
      //   'price': '114.00',
      //   'cost_price': '104.00',
      //   'market_price': '0.00',
      //   'weight': null,
      //   'stock': 44,
      //   'create_mode': 0,
      //   'supplier_id': 1,
      //   'created_at': '2023-11-21 14:07:14',
      //   'goods_pic': 'http://image.mihui365.com/bbc/middleImg/18374490649018787.jpg',
      //   'attr': [
      //     {
      //       'id': 760876,
      //       'attribute_id': '45382460',
      //       'name': '保质期',
      //       'attribute_name': '2025年07月',
      //       'goods_id': 328088,
      //       'goods_spu': 'BS10511879',
      //       'supplier_id': 1
      //     },
      //     {
      //       'id': 760877,
      //       'attribute_id': '45382461',
      //       'name': '规格',
      //       'attribute_name': '1件装',
      //       'goods_id': 328088,
      //       'goods_spu': 'BS10511879',
      //       'supplier_id': 1
      //     },
      //     {
      //       'id': 760878,
      //       'attribute_id': '45382462',
      //       'name': '规格',
      //       'attribute_name': '2件装',
      //       'goods_id': 328088,
      //       'goods_spu': 'BS10511879',
      //       'supplier_id': 1
      //     },
      //     {
      //       'id': 760879,
      //       'attribute_id': '45382463',
      //       'name': '规格',
      //       'attribute_name': '3件装',
      //       'goods_id': 328088,
      //       'goods_spu': 'BS10511879',
      //       'supplier_id': 1
      //     },
      //     {
      //       'id': 760880,
      //       'attribute_id': '45382464',
      //       'name': '规格',
      //       'attribute_name': '6件装',
      //       'goods_id': 328088,
      //       'goods_spu': 'BS10511879',
      //       'supplier_id': 1
      //     }
      //   ],
      //   'rule': [
      //     {
      //       'id': 598890,
      //       'ext_id': '138370026',
      //       'goods_sku': '138370026',
      //       'goods_id': 328088,
      //       'goods_spu': 'BS10511879',
      //       'spec_sku': '45382460_45382461',
      //       'sku_name': '保质期:2025年07月;规格:1件装',
      //       'sku_attribute_id': '["45382460","45382461"]',
      //       'sku_attribute_name': '["2025\\u5e7407\\u6708","1\\u4ef6\\u88c5"]',
      //       'sku_price': '114.00',
      //       'activity_price': '0.00',
      //       'line_price': '0.00',
      //       'market_price': '0.00',
      //       'sku_weight': '1000',
      //       'sku_quantity': 1,
      //       'sku_stock': 10,
      //       'spec_img': '',
      //       'supplier_id': 1
      //     },
      //     {
      //       'id': 598891,
      //       'ext_id': '138370027',
      //       'goods_sku': '138370027',
      //       'goods_id': 328088,
      //       'goods_spu': 'BS10511879',
      //       'spec_sku': '45382460_45382462',
      //       'sku_name': '保质期:2025年07月;规格:2件装',
      //       'sku_attribute_id': '["45382460","45382462"]',
      //       'sku_attribute_name': '["2025\\u5e7407\\u6708","2\\u4ef6\\u88c5"]',
      //       'sku_price': '222.00',
      //       'activity_price': '0.00',
      //       'line_price': '0.00',
      //       'market_price': '0.00',
      //       'sku_weight': '2111',
      //       'sku_quantity': 2,
      //       'sku_stock': 10,
      //       'spec_img': '',
      //       'supplier_id': 1
      //     },
      //     {
      //       'id': 598892,
      //       'ext_id': '138370028',
      //       'goods_sku': '138370028',
      //       'goods_id': 328088,
      //       'goods_spu': 'BS10511879',
      //       'spec_sku': '45382460_45382463',
      //       'sku_name': '保质期:2025年07月;规格:3件装',
      //       'sku_attribute_id': '["45382460","45382463"]',
      //       'sku_attribute_name': '["2025\\u5e7407\\u6708","3\\u4ef6\\u88c5"]',
      //       'sku_price': '321.00',
      //       'activity_price': '0.00',
      //       'line_price': '0.00',
      //       'market_price': '0.00',
      //       'sku_weight': '3222',
      //       'sku_quantity': 3,
      //       'sku_stock': 12,
      //       'spec_img': '',
      //       'supplier_id': 1
      //     },
      //     {
      //       'id': 598893,
      //       'ext_id': '138370029',
      //       'goods_sku': '138370029',
      //       'goods_id': 328088,
      //       'goods_spu': 'BS10511879',
      //       'spec_sku': '45382460_45382464',
      //       'sku_name': '保质期:2025年07月;规格:6件装',
      //       'sku_attribute_id': '["45382460","45382464"]',
      //       'sku_attribute_name': '["2025\\u5e7407\\u6708","6\\u4ef6\\u88c5"]',
      //       'sku_price': '607.00',
      //       'activity_price': '0.00',
      //       'line_price': '0.00',
      //       'market_price': '0.00',
      //       'sku_weight': '3222',
      //       'sku_quantity': 6,
      //       'sku_stock': 12,
      //       'spec_img': '',
      //       'supplier_id': 1
      //     }
      //   ],
      //   'cate_id_arr': [
      //     1,
      //     3,
      //     5
      //   ]
      // }
    }
  },
  watch: {

    '$route.query.goods_spu': { // $route可以用引号，也可以不用引号
      handler(to, from) {
        console.log(to)
        this.goods_spu = to
        this.getList()
      },
      deep: true, // 深度观察监听
      immediate: true // 第一次初始化渲染就可以监听到
    }
  },
  created() {
    this.goods_spu = this.$route.query.goods_spu
    if (this.goods_spu) {
      this.getList()
    }
  },
  methods: {
    getList() {
      // console.log(this.queryParams)
      tempGoods(this.goods_spu).then(response => {
        // console.log(response)
        this.goodsInfo = response.data
      })
    }
  }
}
</script>

<style lang="less">
.goods-detail-container{
  width: 1210px;
  display: flex;
  margin: 50px auto;
  flex-direction: column;
  .top{
    display: flex;
    //justify-content: space-between;
    .el-carousel{
      height: 400px;
      width: 400px;
      border: 1px solid #c8c8c8;
    }
    .goods-info{
      margin-left: 50px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .goods-title{
        .el-tag{
          margin-right: 10px;
        }
        display: flex;
        align-items: center;
      }
      .goods-price-box{
        .text-red{
          color: #FF0000;
        }
        div{
          margin: 20px 0;
        }
        font-size: 16px;
        display: flex;
        flex-direction: column;
        line-height: 1.5;
      }

    }
  }
  .bottom{
    margin-top: 30px;
    .goods-prod{
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #0f0f0f;
      padding: 10px 0;
    }
    .goods-description{
      text-align: center;
    }
  }
}
</style>
